<template>
  <div class="ranking-page">
    <div class="container">
      <div class="page-title mt-4 mb-4">
        <h2>小说排行榜</h2>
      </div>

      <div class="ranking-content flex">
        <!-- 排行榜分类 -->
        <div class="ranking-sidebar">
          <div class="sidebar-title">排行分类</div>
          <el-menu
            :default-active="activeRankingType"
            class="ranking-menu"
            @select="handleRankingTypeChange"
          >
            <el-menu-item index="comprehensive">
              <span>综合榜单</span>
            </el-menu-item>
            <el-menu-item index="hot">
              <span>热度榜单</span>
            </el-menu-item>
            <el-menu-item index="recommend">
              <span>推荐榜单</span>
            </el-menu-item>
            <el-menu-item index="collection">
              <span>收藏榜单</span>
            </el-menu-item>
            <el-menu-item index="update">
              <span>更新榜单</span>
            </el-menu-item>
            <el-menu-item index="word">
              <span>字数榜单</span>
            </el-menu-item>
          </el-menu>

          <div class="sidebar-title mt-4">作品分类</div>
          <el-menu
            :default-active="activeCategoryType"
            class="ranking-menu"
            @select="handleCategoryChange"
          >
            <el-menu-item index="all">
              <span>全部分类</span>
            </el-menu-item>
            <el-menu-item v-for="category in categories" :key="category.id" :index="category.name">
              <span>{{ category.name }}</span>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 排行榜列表 -->
        <div class="ranking-list-container ml-4">
          <div class="ranking-header card">
            <div class="ranking-title">{{ rankingTitle }}</div>
            <div class="ranking-tabs">
              <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
                <el-radio-button label="week">周榜</el-radio-button>
                <el-radio-button label="month">月榜</el-radio-button>
                <el-radio-button label="all">总榜</el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div class="ranking-list card mt-3">
            <!-- 前三名作品 - 大展示 -->
            <div class="top-three mb-4">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(book, index) in topThreeBooks" :key="index">
                  <div class="top-book-item">
                    <div class="rank-number">{{ index + 1 }}</div>
                    <div class="book-cover-wrapper">
                      <div class="book-cover-placeholder"></div>
                    </div>
                    <div class="book-info mt-2">
                      <div class="book-title text-ellipsis">{{ book.title }}</div>
                      <div class="book-author text-ellipsis text-secondary mt-1">{{ book.author }}</div>
                      <div class="book-stats flex justify-between mt-2">
                        <span>{{ book.category }}</span>
                        <span class="text-primary">{{ book.rankValue }}{{ rankValueUnit }}</span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 4-50名作品 - 列表展示 -->
            <div class="rank-table">
              <el-table :data="otherRankBooks" style="width: 100%">
                <el-table-column label="排名" width="80">
                  <template slot-scope="scope">
                    <div class="rank-index">{{ scope.$index + 4 }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="书名">
                  <template slot-scope="scope">
                    <router-link :to="`/page/${scope.row.id}`" class="book-link">{{ scope.row.title }}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="author" label="作者" width="180">
                  <template slot-scope="scope">
                    <router-link :to="`/author-page/${scope.row.author}`" class="author-link">{{ scope.row.author }}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="category" label="分类" width="120"></el-table-column>
                <el-table-column label="数值" width="120" align="right">
                  <template slot-scope="scope">
                    <span class="rank-value text-primary">{{ scope.row.rankValue }}{{ rankValueUnit }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'RankingPage',
  data() {
    return {
      activeRankingType: 'comprehensive',
      activeCategoryType: 'all',
      timeRange: 'week',
      rankBooks: []
    }
  },
  computed: {
    ...mapState(['categories']),
    rankingTitle() {
      let title = ''
      
      switch (this.activeRankingType) {
        case 'comprehensive':
          title = '综合榜单'
          break
        case 'hot':
          title = '热度榜单'
          break
        case 'recommend':
          title = '推荐榜单'
          break
        case 'collection':
          title = '收藏榜单'
          break
        case 'update':
          title = '更新榜单'
          break
        case 'word':
          title = '字数榜单'
          break
      }
      
      if (this.activeCategoryType !== 'all') {
        title += ` - ${this.activeCategoryType}`
      }
      
      return title
    },
    rankValueUnit() {
      switch (this.activeRankingType) {
        case 'hot':
          return ' 点击'
        case 'recommend':
          return ' 推荐'
        case 'collection':
          return ' 收藏'
        case 'update':
          return ' 更新'
        case 'word':
          return ' 万字'
        default:
          return ' 分'
      }
    },
    topThreeBooks() {
      return this.rankBooks.slice(0, 3)
    },
    otherRankBooks() {
      return this.rankBooks.slice(3)
    }
  },
  methods: {
    handleRankingTypeChange(type) {
      this.activeRankingType = type
      this.fetchRankData()
    },
    handleCategoryChange(category) {
      this.activeCategoryType = category
      this.fetchRankData()
    },
    handleTimeRangeChange() {
      this.fetchRankData()
    },
    fetchRankData() {
      // 真实环境中应该从API获取排行数据
      // 这里模拟不同条件下的排行数据
      
      // 模拟不同数值范围
      let maxValue, minValue
      switch (this.activeRankingType) {
        case 'hot':
          maxValue = 1000000
          minValue = 100000
          break
        case 'recommend':
          maxValue = 50000
          minValue = 5000
          break
        case 'collection':
          maxValue = 30000
          minValue = 3000
          break
        case 'update':
          maxValue = 1000
          minValue = 100
          break
        case 'word':
          maxValue = 1000
          minValue = 100
          break
        default:
          maxValue = 10000
          minValue = 1000
      }
      
      // 生成50本书的排行数据
      this.rankBooks = Array.from({ length: 20 }, (_, i) => {
        // 随机但有序的排名值
        const rankValue = Math.floor(maxValue - (i * (maxValue - minValue) / 20) + Math.random() * (maxValue - minValue) / 10)
        
        // 分类过滤
        let category
        if (this.activeCategoryType === 'all') {
          const randomCategoryIndex = Math.floor(Math.random() * this.categories.length)
          category = this.categories[randomCategoryIndex].name
        } else {
          category = this.activeCategoryType
        }
        
        return {
          id: 1000 + i,
          title: `排行榜小说${i + 1}`,
          author: `作者${i + 1}`,
          category,
          rankValue
        }
      })
    }
  },
  created() {
    this.fetchRankData()
  }
}
</script>

<style scoped>
.page-title h2 {
  font-size: 26px;
  font-weight: bold;
  color: #333;
}

.ranking-content {
  display: flex;
}

.ranking-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.ranking-list-container {
  flex: 1;
}

.sidebar-title {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0 10px 20px;
}

.ranking-menu {
  border-right: none;
}

.ranking-header {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking-title {
  font-size: 18px;
  font-weight: bold;
}

.ranking-list {
  padding: 20px;
}

.top-book-item {
  position: relative;
  padding: 10px;
}

.rank-number {
  position: absolute;
  top: 0;
  left: 10px;
  width: 30px;
  height: 30px;
  background-color: #ff6700;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 10px 0;
  z-index: 1;
}

.book-cover-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 133%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.book-cover-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}

.book-title {
  font-weight: bold;
  font-size: 15px;
}

.book-author {
  font-size: 13px;
}

.rank-index {
  width: 25px;
  height: 25px;
  background-color: #f4f4f4;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.book-link, .author-link {
  color: #333;
}

.book-link:hover, .author-link:hover {
  color: #ff6700;
}

.rank-value {
  font-weight: bold;
}
</style> 